<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忆小宝 - 老年人记忆助手原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'warm-orange': '#FF8A65',
                        'soft-orange': '#FFB74D',
                        'light-orange': '#FFF3E0',
                        'warm-gray': '#F5F5F5'
                    }
                }
            }
        }
    </script>
    <style>
        .phone-container {
            width: 375px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            border-radius: 20px;
            overflow: hidden;
        }
        .screen {
            display: none;
        }
        .screen.active {
            display: block;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #FF8A65 0%, #FFB74D 100%);
        }
        .card-shadow {
            box-shadow: 0 4px 12px rgba(255, 138, 101, 0.2);
        }
    </style>
</head>
<body class="bg-gray-100 p-4">
    <div class="max-w-6xl mx-auto">
        <h1 class="text-3xl font-bold text-center mb-8 text-gray-800">忆小宝 - 老年人记忆助手App原型</h1>
        
        <!-- 导航按钮 -->
        <div class="flex flex-wrap justify-center gap-2 mb-8">
            <button onclick="showScreen('welcome')" class="px-4 py-2 bg-warm-orange text-white rounded-lg hover:bg-opacity-80 transition-all">欢迎页</button>
            <button onclick="showScreen('home')" class="px-4 py-2 bg-warm-orange text-white rounded-lg hover:bg-opacity-80 transition-all">首页</button>
            <button onclick="showScreen('memory-board')" class="px-4 py-2 bg-warm-orange text-white rounded-lg hover:bg-opacity-80 transition-all">黄金记忆板</button>
            <button onclick="showScreen('alarm')" class="px-4 py-2 bg-warm-orange text-white rounded-lg hover:bg-opacity-80 transition-all">贴心闹钟</button>
            <button onclick="showScreen('items')" class="px-4 py-2 bg-warm-orange text-white rounded-lg hover:bg-opacity-80 transition-all">记住这东西</button>
            <button onclick="showScreen('voice-wall')" class="px-4 py-2 bg-warm-orange text-white rounded-lg hover:bg-opacity-80 transition-all">亲人声音墙</button>
            <button onclick="showScreen('training')" class="px-4 py-2 bg-warm-orange text-white rounded-lg hover:bg-opacity-80 transition-all">记忆训练</button>
        </div>

        <div class="flex flex-wrap gap-8 justify-center">
            
            <!-- 欢迎页 -->
            <div class="phone-container">
                <div id="welcome" class="screen active">
                    <div class="gradient-bg h-screen flex flex-col items-center justify-center text-white p-8">
                        <div class="text-center">
                            <i class="fas fa-heart text-6xl mb-6 animate-pulse"></i>
                            <h1 class="text-4xl font-bold mb-4">忆小宝</h1>
                            <p class="text-xl mb-8 opacity-90">您的贴心记忆助手</p>
                            <div class="space-y-4 text-lg">
                                <div class="flex items-center justify-center">
                                    <i class="fas fa-check-circle mr-3"></i>
                                    <span>帮您记住重要事情</span>
                                </div>
                                <div class="flex items-center justify-center">
                                    <i class="fas fa-check-circle mr-3"></i>
                                    <span>连接家人关爱</span>
                                </div>
                                <div class="flex items-center justify-center">
                                    <i class="fas fa-check-circle mr-3"></i>
                                    <span>训练记忆能力</span>
                                </div>
                            </div>
                            <button class="mt-12 bg-white text-warm-orange px-8 py-4 rounded-full text-xl font-bold hover:shadow-lg transition-all">
                                开始使用
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 首页 -->
            <div class="phone-container">
                <div id="home" class="screen">
                    <div class="h-screen bg-light-orange">
                        <!-- 状态栏 -->
                        <div class="gradient-bg text-white p-4 pt-12">
                            <div class="flex justify-between items-center mb-4">
                                <div class="text-lg font-semibold">忆小宝</div>
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-wifi"></i>
                                    <i class="fas fa-battery-three-quarters"></i>
                                </div>
                            </div>
                            <div class="text-center">
                                <h2 class="text-2xl font-bold mb-2">您好，张奶奶</h2>
                                <p class="text-lg opacity-90">今天是2024年1月15日 星期一</p>
                            </div>
                        </div>

                        <!-- 快捷功能区 -->
                        <div class="p-6">
                            <div class="bg-white rounded-2xl p-4 card-shadow mb-6">
                                <h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center">
                                    <i class="fas fa-star text-warm-orange mr-2"></i>
                                    今日重要提醒
                                </h3>
                                <div class="bg-warm-orange bg-opacity-10 rounded-xl p-4">
                                    <div class="flex items-center">
                                        <i class="fas fa-pills text-warm-orange text-2xl mr-3"></i>
                                        <div>
                                            <p class="font-semibold text-gray-800">记得吃降压药</p>
                                            <p class="text-sm text-gray-600">上午9:00 - 还有30分钟</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 功能菜单 -->
                            <div class="grid grid-cols-2 gap-4">
                                <div class="bg-white rounded-2xl p-6 card-shadow text-center">
                                    <i class="fas fa-clipboard-list text-4xl text-warm-orange mb-3"></i>
                                    <h4 class="font-bold text-gray-800 text-lg">黄金记忆板</h4>
                                    <p class="text-sm text-gray-600 mt-1">重要事项提醒</p>
                                </div>
                                <div class="bg-white rounded-2xl p-6 card-shadow text-center">
                                    <i class="fas fa-clock text-4xl text-warm-orange mb-3"></i>
                                    <h4 class="font-bold text-gray-800 text-lg">贴心闹钟</h4>
                                    <p class="text-sm text-gray-600 mt-1">定时语音提醒</p>
                                </div>
                                <div class="bg-white rounded-2xl p-6 card-shadow text-center">
                                    <i class="fas fa-camera text-4xl text-warm-orange mb-3"></i>
                                    <h4 class="font-bold text-gray-800 text-lg">记住这东西</h4>
                                    <p class="text-sm text-gray-600 mt-1">物品位置记录</p>
                                </div>
                                <div class="bg-white rounded-2xl p-6 card-shadow text-center">
                                    <i class="fas fa-heart text-4xl text-warm-orange mb-3"></i>
                                    <h4 class="font-bold text-gray-800 text-lg">亲人声音墙</h4>
                                    <p class="text-sm text-gray-600 mt-1">家人关爱语音</p>
                                </div>
                            </div>

                            <!-- 记忆训练入口 -->
                            <div class="mt-6 bg-white rounded-2xl p-4 card-shadow">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <i class="fas fa-brain text-2xl text-warm-orange mr-3"></i>
                                        <div>
                                            <h4 class="font-bold text-gray-800">记忆训练</h4>
                                            <p class="text-sm text-gray-600">今日还未训练</p>
                                        </div>
                                    </div>
                                    <button class="bg-warm-orange text-white px-4 py-2 rounded-full text-sm font-semibold">
                                        开始训练
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 底部导航 -->
                        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200">
                            <div class="flex justify-around py-3">
                                <div class="text-center">
                                    <i class="fas fa-home text-2xl text-warm-orange"></i>
                                    <p class="text-xs text-warm-orange mt-1">首页</p>
                                </div>
                                <div class="text-center">
                                    <i class="fas fa-list text-2xl text-gray-400"></i>
                                    <p class="text-xs text-gray-400 mt-1">记录</p>
                                </div>
                                <div class="text-center">
                                    <i class="fas fa-user text-2xl text-gray-400"></i>
                                    <p class="text-xs text-gray-400 mt-1">我的</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 黄金记忆板 -->
            <div class="phone-container">
                <div id="memory-board" class="screen">
                    <div class="h-screen bg-light-orange">
                        <!-- 头部 -->
                        <div class="gradient-bg text-white p-4 pt-12">
                            <div class="flex items-center justify-between">
                                <i class="fas fa-arrow-left text-xl"></i>
                                <h2 class="text-xl font-bold">黄金记忆板</h2>
                                <i class="fas fa-plus text-xl"></i>
                            </div>
                        </div>

                        <div class="p-4 pb-20">
                            <!-- 今日重要 -->
                            <div class="mb-6">
                                <h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center">
                                    <i class="fas fa-star text-warm-orange mr-2"></i>
                                    今日重要
                                </h3>
                                
                                <div class="bg-white rounded-2xl p-4 card-shadow mb-3">
                                    <div class="flex items-start">
                                        <img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=60&h=60&fit=crop&crop=center" 
                                             class="w-16 h-16 rounded-xl object-cover mr-4">
                                        <div class="flex-1">
                                            <h4 class="font-bold text-gray-800 text-lg mb-1">记得吃降压药</h4>
                                            <p class="text-gray-600 mb-2">每天上午9点，饭后半小时服用</p>
                                            <div class="flex items-center justify-between">
                                                <span class="text-sm text-warm-orange bg-warm-orange bg-opacity-10 px-3 py-1 rounded-full">
                                                    <i class="fas fa-clock mr-1"></i>09:00
                                                </span>
                                                <button class="bg-green-500 text-white px-4 py-2 rounded-full text-sm">
                                                    <i class="fas fa-check mr-1"></i>已完成
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-3 pt-3 border-t border-gray-100">
                                        <p class="text-sm text-gray-500 flex items-center">
                                            <i class="fas fa-user mr-2"></i>小明添加 · 来自家人关爱
                                        </p>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-start">
                                        <img src="https://images.unsplash.com/photo-1551218808-94e220e084d2?w=60&h=60&fit=crop&crop=center" 
                                             class="w-16 h-16 rounded-xl object-cover mr-4">
                                        <div class="flex-1">
                                            <h4 class="font-bold text-gray-800 text-lg mb-1">下午看医生</h4>
                                            <p class="text-gray-600 mb-2">心内科复查，记得带上病历本</p>
                                            <div class="flex items-center justify-between">
                                                <span class="text-sm text-warm-orange bg-warm-orange bg-opacity-10 px-3 py-1 rounded-full">
                                                    <i class="fas fa-clock mr-1"></i>14:30
                                                </span>
                                                <button class="bg-warm-orange text-white px-4 py-2 rounded-full text-sm">
                                                    <i class="fas fa-bell mr-1"></i>提醒我
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 本周计划 -->
                            <div>
                                <h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center">
                                    <i class="fas fa-calendar text-warm-orange mr-2"></i>
                                    本周计划
                                </h3>
                                
                                <div class="bg-white rounded-2xl p-4 card-shadow mb-3">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-3">
                                                <i class="fas fa-shopping-cart text-blue-500 text-xl"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">买菜清单</h4>
                                                <p class="text-sm text-gray-600">周三去超市</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-gray-400">2天后</span>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-3">
                                                <i class="fas fa-phone text-green-500 text-xl"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">给小红打电话</h4>
                                                <p class="text-sm text-gray-600">周末聊天</p>
                                            </div>
                                        </div>
                                        <span class="text-xs text-gray-400">4天后</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部操作栏 -->
                        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
                            <div class="flex space-x-3">
                                <button class="flex-1 bg-warm-orange text-white py-3 rounded-xl font-semibold flex items-center justify-center">
                                    <i class="fas fa-microphone mr-2"></i>语音添加
                                </button>
                                <button class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-semibold flex items-center justify-center">
                                    <i class="fas fa-camera mr-2"></i>拍照添加
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 贴心回忆闹钟 -->
            <div class="phone-container">
                <div id="alarm" class="screen">
                    <div class="h-screen bg-light-orange">
                        <!-- 头部 -->
                        <div class="gradient-bg text-white p-4 pt-12">
                            <div class="flex items-center justify-between">
                                <i class="fas fa-arrow-left text-xl"></i>
                                <h2 class="text-xl font-bold">贴心回忆闹钟</h2>
                                <i class="fas fa-plus text-xl"></i>
                            </div>
                        </div>

                        <div class="p-4 pb-20">
                            <!-- 正在播放 -->
                            <div class="bg-white rounded-2xl p-6 card-shadow mb-6">
                                <div class="text-center">
                                    <div class="w-20 h-20 bg-warm-orange bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-play text-warm-orange text-2xl"></i>
                                    </div>
                                    <h3 class="text-lg font-bold text-gray-800 mb-2">正在播放</h3>
                                    <p class="text-gray-600 mb-4">"妈妈，记得按时吃药哦，我们都很关心您的健康"</p>
                                    <div class="flex items-center justify-center space-x-4">
                                        <button class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-backward text-gray-600"></i>
                                        </button>
                                        <button class="w-16 h-16 bg-warm-orange rounded-full flex items-center justify-center">
                                            <i class="fas fa-pause text-white text-xl"></i>
                                        </button>
                                        <button class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
                                            <i class="fas fa-forward text-gray-600"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 闹钟列表 -->
                            <h3 class="text-lg font-bold text-gray-800 mb-3">我的闹钟</h3>
                            
                            <div class="space-y-3">
                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-3">
                                                <i class="fas fa-pills text-blue-500"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">吃药提醒</h4>
                                                <p class="text-sm text-gray-600">每天 09:00</p>
                                                <p class="text-xs text-warm-orange">小明的录音</p>
                                            </div>
                                        </div>
                                        <div class="flex items-center">
                                            <label class="relative inline-flex items-center cursor-pointer">
                                                <input type="checkbox" checked class="sr-only peer">
                                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-warm-orange"></div>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-3">
                                                <i class="fas fa-utensils text-green-500"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">午餐时间</h4>
                                                <p class="text-sm text-gray-600">每天 12:00</p>
                                                <p class="text-xs text-warm-orange">小红的录音</p>
                                            </div>
                                        </div>
                                        <div class="flex items-center">
                                            <label class="relative inline-flex items-center cursor-pointer">
                                                <input type="checkbox" checked class="sr-only peer">
                                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-warm-orange"></div>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mr-3">
                                                <i class="fas fa-moon text-purple-500"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">晚安祝福</h4>
                                                <p class="text-sm text-gray-600">每天 21:00</p>
                                                <p class="text-xs text-warm-orange">全家录音</p>
                                            </div>
                                        </div>
                                        <div class="flex items-center">
                                            <label class="relative inline-flex items-center cursor-pointer">
                                                <input type="checkbox" class="sr-only peer">
                                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-warm-orange"></div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部操作栏 -->
                        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
                            <button class="w-full bg-warm-orange text-white py-3 rounded-xl font-semibold flex items-center justify-center">
                                <i class="fas fa-microphone mr-2"></i>录制新的语音闹钟
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 记住这东西 -->
            <div class="phone-container">
                <div id="items" class="screen">
                    <div class="h-screen bg-light-orange">
                        <!-- 头部 -->
                        <div class="gradient-bg text-white p-4 pt-12">
                            <div class="flex items-center justify-between">
                                <i class="fas fa-arrow-left text-xl"></i>
                                <h2 class="text-xl font-bold">记住这东西</h2>
                                <i class="fas fa-search text-xl"></i>
                            </div>
                        </div>

                        <div class="p-4 pb-20">
                            <!-- 快速拍照 -->
                            <div class="bg-white rounded-2xl p-6 card-shadow mb-6 text-center">
                                <div class="w-16 h-16 bg-warm-orange bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-camera text-warm-orange text-2xl"></i>
                                </div>
                                <h3 class="text-lg font-bold text-gray-800 mb-2">拍照记录物品</h3>
                                <p class="text-gray-600 mb-4">拍下物品照片，我来帮您记住它在哪里</p>
                                <button class="bg-warm-orange text-white px-6 py-3 rounded-xl font-semibold">
                                    <i class="fas fa-camera mr-2"></i>开始拍照
                                </button>
                            </div>

                            <!-- 最近记录 -->
                            <h3 class="text-lg font-bold text-gray-800 mb-3">最近记录</h3>
                            
                            <div class="space-y-3">
                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-start">
                                        <img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=80&h=80&fit=crop&crop=center" 
                                             class="w-20 h-20 rounded-xl object-cover mr-4">
                                        <div class="flex-1">
                                            <h4 class="font-bold text-gray-800 text-lg mb-1">老花镜</h4>
                                            <p class="text-gray-600 mb-2">放在客厅茶几上</p>
                                            <div class="flex items-center justify-between">
                                                <span class="text-sm text-gray-500">2小时前</span>
                                                <button class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm">
                                                    <i class="fas fa-check mr-1"></i>已找到
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-3 pt-3 border-t border-gray-100">
                                        <button class="text-warm-orange text-sm flex items-center">
                                            <i class="fas fa-volume-up mr-2"></i>播放语音标签
                                        </button>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-start">
                                        <img src="https://images.unsplash.com/photo-1584464491033-06628f3a6b7b?w=80&h=80&fit=crop&crop=center" 
                                             class="w-20 h-20 rounded-xl object-cover mr-4">
                                        <div class="flex-1">
                                            <h4 class="font-bold text-gray-800 text-lg mb-1">钥匙</h4>
                                            <p class="text-gray-600 mb-2">放在玄关鞋柜上的小盒子里</p>
                                            <div class="flex items-center justify-between">
                                                <span class="text-sm text-gray-500">昨天</span>
                                                <button class="bg-warm-orange text-white px-3 py-1 rounded-full text-sm">
                                                    <i class="fas fa-map-marker-alt mr-1"></i>查看位置
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-start">
                                        <img src="https://images.unsplash.com/photo-1550831107-1553da8c8464?w=80&h=80&fit=crop&crop=center" 
                                             class="w-20 h-20 rounded-xl object-cover mr-4">
                                        <div class="flex-1">
                                            <h4 class="font-bold text-gray-800 text-lg mb-1">药盒</h4>
                                            <p class="text-gray-600 mb-2">放在卧室床头柜第二个抽屉</p>
                                            <div class="flex items-center justify-between">
                                                <span class="text-sm text-gray-500">3天前</span>
                                                <button class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm">
                                                    <i class="fas fa-edit mr-1"></i>更新位置
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 分类浏览 -->
                            <div class="mt-6">
                                <h3 class="text-lg font-bold text-gray-800 mb-3">按类别查看</h3>
                                <div class="grid grid-cols-3 gap-3">
                                    <div class="bg-white rounded-xl p-4 text-center card-shadow">
                                        <i class="fas fa-glasses text-2xl text-blue-500 mb-2"></i>
                                        <p class="text-sm font-semibold text-gray-800">日用品</p>
                                        <p class="text-xs text-gray-500">12件</p>
                                    </div>
                                    <div class="bg-white rounded-xl p-4 text-center card-shadow">
                                        <i class="fas fa-pills text-2xl text-green-500 mb-2"></i>
                                        <p class="text-sm font-semibold text-gray-800">药品</p>
                                        <p class="text-xs text-gray-500">5件</p>
                                    </div>
                                    <div class="bg-white rounded-xl p-4 text-center card-shadow">
                                        <i class="fas fa-key text-2xl text-warm-orange mb-2"></i>
                                        <p class="text-sm font-semibold text-gray-800">重要物品</p>
                                        <p class="text-xs text-gray-500">8件</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部操作栏 -->
                        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
                            <div class="flex space-x-3">
                                <button class="flex-1 bg-warm-orange text-white py-3 rounded-xl font-semibold flex items-center justify-center">
                                    <i class="fas fa-camera mr-2"></i>拍照记录
                                </button>
                                <button class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-semibold flex items-center justify-center">
                                    <i class="fas fa-microphone mr-2"></i>语音记录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 亲人声音墙 -->
            <div class="phone-container">
                <div id="voice-wall" class="screen">
                    <div class="h-screen bg-light-orange">
                        <!-- 头部 -->
                        <div class="gradient-bg text-white p-4 pt-12">
                            <div class="flex items-center justify-between">
                                <i class="fas fa-arrow-left text-xl"></i>
                                <h2 class="text-xl font-bold">亲人声音墙</h2>
                                <i class="fas fa-heart text-xl"></i>
                            </div>
                        </div>

                        <div class="p-4 pb-20">
                            <!-- 今日推荐 -->
                            <div class="bg-white rounded-2xl p-6 card-shadow mb-6">
                                <div class="text-center">
                                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=80&h=80&fit=crop&crop=faces" 
                                         class="w-20 h-20 rounded-full object-cover mx-auto mb-4">
                                    <h3 class="text-lg font-bold text-gray-800 mb-2">小明的祝福</h3>
                                    <p class="text-gray-600 mb-4">"妈妈，今天天气很好，记得出去晒晒太阳哦！"</p>
                                    <div class="flex items-center justify-center space-x-4">
                                        <button class="w-16 h-16 bg-warm-orange rounded-full flex items-center justify-center">
                                            <i class="fas fa-play text-white text-xl"></i>
                                        </button>
                                    </div>
                                    <p class="text-sm text-gray-500 mt-3">今天 08:30</p>
                                </div>
                            </div>

                            <!-- 家人列表 -->
                            <h3 class="text-lg font-bold text-gray-800 mb-3">家人消息</h3>
                            
                            <div class="space-y-3">
                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-center">
                                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop&crop=faces" 
                                             class="w-16 h-16 rounded-full object-cover mr-4">
                                        <div class="flex-1">
                                            <div class="flex items-center justify-between mb-1">
                                                <h4 class="font-bold text-gray-800">小明</h4>
                                                <span class="text-xs text-gray-500">2小时前</span>
                                            </div>
                                            <p class="text-gray-600 text-sm mb-2">发送了一条语音祝福</p>
                                            <div class="flex items-center">
                                                <button class="bg-warm-orange bg-opacity-20 text-warm-orange px-3 py-1 rounded-full text-sm mr-2">
                                                    <i class="fas fa-play mr-1"></i>播放
                                                </button>
                                                <span class="text-xs text-gray-500">1分30秒</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-center">
                                        <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=60&h=60&fit=crop&crop=faces" 
                                             class="w-16 h-16 rounded-full object-cover mr-4">
                                        <div class="flex-1">
                                            <div class="flex items-center justify-between mb-1">
                                                <h4 class="font-bold text-gray-800">小红</h4>
                                                <span class="text-xs text-gray-500">昨天</span>
                                            </div>
                                            <p class="text-gray-600 text-sm mb-2">妈妈，我做了您最爱吃的红烧肉</p>
                                            <div class="flex items-center">
                                                <button class="bg-warm-orange bg-opacity-20 text-warm-orange px-3 py-1 rounded-full text-sm mr-2">
                                                    <i class="fas fa-play mr-1"></i>播放
                                                </button>
                                                <span class="text-xs text-gray-500">45秒</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-center">
                                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=60&h=60&fit=crop&crop=faces" 
                                             class="w-16 h-16 rounded-full object-cover mr-4">
                                        <div class="flex-1">
                                            <div class="flex items-center justify-between mb-1">
                                                <h4 class="font-bold text-gray-800">小华</h4>
                                                <span class="text-xs text-gray-500">2天前</span>
                                            </div>
                                            <p class="text-gray-600 text-sm mb-2">奶奶，我考试得了第一名！</p>
                                            <div class="flex items-center">
                                                <button class="bg-warm-orange bg-opacity-20 text-warm-orange px-3 py-1 rounded-full text-sm mr-2">
                                                    <i class="fas fa-play mr-1"></i>播放
                                                </button>
                                                <span class="text-xs text-gray-500">1分15秒</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 收藏的语音 -->
                            <div class="mt-6">
                                <h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center">
                                    <i class="fas fa-star text-warm-orange mr-2"></i>
                                    我的收藏
                                </h3>
                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="text-center">
                                        <i class="fas fa-heart text-4xl text-red-400 mb-3"></i>
                                        <p class="text-gray-600">收藏家人的温暖话语</p>
                                        <p class="text-sm text-gray-500 mt-1">长按语音消息即可收藏</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部操作栏 -->
                        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
                            <div class="flex space-x-3">
                                <button class="flex-1 bg-warm-orange text-white py-3 rounded-xl font-semibold flex items-center justify-center">
                                    <i class="fas fa-random mr-2"></i>随机播放
                                </button>
                                <button class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-semibold flex items-center justify-center">
                                    <i class="fas fa-cog mr-2"></i>播放设置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 记忆训练助手 -->
            <div class="phone-container">
                <div id="training" class="screen">
                    <div class="h-screen bg-light-orange">
                        <!-- 头部 -->
                        <div class="gradient-bg text-white p-4 pt-12">
                            <div class="flex items-center justify-between">
                                <i class="fas fa-arrow-left text-xl"></i>
                                <h2 class="text-xl font-bold">记忆训练助手</h2>
                                <i class="fas fa-trophy text-xl"></i>
                            </div>
                        </div>

                        <div class="p-4 pb-20">
                            <!-- 今日训练状态 -->
                            <div class="bg-white rounded-2xl p-6 card-shadow mb-6">
                                <div class="text-center">
                                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-brain text-green-500 text-2xl"></i>
                                    </div>
                                    <h3 class="text-lg font-bold text-gray-800 mb-2">今日训练进度</h3>
                                    <div class="flex items-center justify-center mb-4">
                                        <div class="w-32 h-32 relative">
                                            <svg class="w-32 h-32 transform -rotate-90" viewBox="0 0 36 36">
                                                <path class="text-gray-200" stroke="currentColor" stroke-width="3" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
                                                <path class="text-warm-orange" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="60, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
                                            </svg>
                                            <div class="absolute inset-0 flex items-center justify-center">
                                                <span class="text-2xl font-bold text-gray-800">60%</span>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="text-gray-600">已完成 3/5 项训练</p>
                                </div>
                            </div>

                            <!-- 训练项目 -->
                            <h3 class="text-lg font-bold text-gray-800 mb-3">训练项目</h3>
                            
                            <div class="space-y-3">
                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-3">
                                                <i class="fas fa-images text-blue-500"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">图卡匹配</h4>
                                                <p class="text-sm text-gray-600">训练视觉记忆能力</p>
                                            </div>
                                        </div>
                                        <div class="flex items-center">
                                            <i class="fas fa-check-circle text-green-500 text-xl mr-2"></i>
                                            <span class="text-sm text-green-600 font-semibold">已完成</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-3">
                                                <i class="fas fa-spell-check text-green-500"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">记词训练</h4>
                                                <p class="text-sm text-gray-600">提升语言记忆力</p>
                                            </div>
                                        </div>
                                        <div class="flex items-center">
                                            <i class="fas fa-check-circle text-green-500 text-xl mr-2"></i>
                                            <span class="text-sm text-green-600 font-semibold">已完成</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow border-2 border-warm-orange">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-warm-orange bg-opacity-20 rounded-xl flex items-center justify-center mr-3">
                                                <i class="fas fa-history text-warm-orange"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">历史回顾</h4>
                                                <p class="text-sm text-gray-600">回忆美好往事</p>
                                            </div>
                                        </div>
                                        <button class="bg-warm-orange text-white px-4 py-2 rounded-full text-sm font-semibold">
                                            开始训练
                                        </button>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow opacity-60">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center mr-3">
                                                <i class="fas fa-puzzle-piece text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">数字记忆</h4>
                                                <p class="text-sm text-gray-600">锻炼数字记忆能力</p>
                                            </div>
                                        </div>
                                        <span class="text-sm text-gray-400">待解锁</span>
                                    </div>
                                </div>

                                <div class="bg-white rounded-2xl p-4 card-shadow opacity-60">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center mr-3">
                                                <i class="fas fa-route text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h4 class="font-bold text-gray-800">路径记忆</h4>
                                                <p class="text-sm text-gray-600">空间记忆训练</p>
                                            </div>
                                        </div>
                                        <span class="text-sm text-gray-400">待解锁</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 成就展示 -->
                            <div class="mt-6">
                                <h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center">
                                    <i class="fas fa-medal text-warm-orange mr-2"></i>
                                    我的成就
                                </h3>
                                <div class="grid grid-cols-3 gap-3">
                                    <div class="bg-white rounded-xl p-4 text-center card-shadow">
                                        <i class="fas fa-fire text-2xl text-red-500 mb-2"></i>
                                        <p class="text-sm font-semibold text-gray-800">连续训练</p>
                                        <p class="text-xs text-gray-500">7天</p>
                                    </div>
                                    <div class="bg-white rounded-xl p-4 text-center card-shadow">
                                        <i class="fas fa-star text-2xl text-yellow-500 mb-2"></i>
                                        <p class="text-sm font-semibold text-gray-800">完美记忆</p>
                                        <p class="text-xs text-gray-500">15次</p>
                                    </div>
                                    <div class="bg-white rounded-xl p-4 text-center card-shadow">
                                        <i class="fas fa-trophy text-2xl text-warm-orange mb-2"></i>
                                        <p class="text-sm font-semibold text-gray-800">记忆达人</p>
                                        <p class="text-xs text-gray-500">等级3</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 底部操作栏 -->
                        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
                            <button class="w-full bg-warm-orange text-white py-3 rounded-xl font-semibold flex items-center justify-center">
                                <i class="fas fa-play mr-2"></i>继续今日训练
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script>
        function showScreen(screenId) {
            // 隐藏所有屏幕
            const screens = document.querySelectorAll('.screen');
            screens.forEach(screen => {
                screen.classList.remove('active');
            });
            
            // 显示选中的屏幕
            const targetScreen = document.getElementById(screenId);
            if (targetScreen) {
                targetScreen.classList.add('active');
            }
        }

        // 默认显示欢迎页
        document.addEventListener('DOMContentLoaded', function() {
            showScreen('welcome');
        });
    </script>
</body>
</html>